<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Follow Along Nav</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h2>Cool</h2>

    <nav class="top">
        <div class="dropdown-background">
            <span class="arrow"></span>
        </div>

        <ul class="cool">
            <li>
                <a href="#">About Me</a>
                <div class="dropdown dropdown1">
                    <div class="bio">
                        <img src="./avatar.png" alt="头像">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
                    </div>
                </div>
            </li>
            <li>
                <a href="#">Courses</a>
                <ul class="dropdown dropdown2 courses">
                    <li>
                        <span class="code">RFB</span>
                        <a href="">React For Beginners</a>
                    </li>
                    <li>
                        <span class="code">ES6</span>
                        <a href="">ES6 For Everyone</a>
                    </li>
                    <li>
                        <span class="code">STPU</span>
                        <a href="">Sublime Text Power User</a>
                    </li>
                    <li>
                        <span class="code">WTF</span>
                        <a href="">What The Flexbox?!</a>
                    </li>
                    <li>
                        <span class="code">LRX</span>
                        <a href="">Learn Redux</a>
                    </li>
                    <li>
                        <span class="code">CLPU</span>
                        <a href="">Command Line Power User</a>
                    </li>
                    <li>
                        <span class="code">MMD</span>
                        <a href="">Mastering Markdown</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Other Links</a>
                <ul class="dropdown dropdown3">
                    <li>
                        <a href="https://twitter.com/" class="button" target="_blank">Twitter</a>
                    </li>
                    <li>
                        <a href="https://facebook.com/" class="button" target="_blank">Facebook</a>
                    </li>
                    <li>
                        <a href="" class="button">Blog</a>
                    </li>
                    <li>
                        <a href="https://wesbos.com/courses" class="button" target="_blank">Course Catalog</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>

    <script src="./script.js" charset="utf-8"></script>
</body>
</html>
